<template>
  <div class="main">
    <div class="main-left">
      <!--视频播放器-->
      <div ref="fullscreenElement" style="height: 94%" @mouseenter="mouseenterlive(true)"
           @mouseleave="mouseenterlive(false)">
        <div style="height: 100%" v-show="iWndType !== 14">
          <el-row :gutter="2" v-for="(item, rowIndex) in rows" :key="rowIndex" type="flex"
                  :style="{ height: 100 / colNum + '%' }">
            <el-col v-for="(item2, colIndex) in cols" :span="item2" :key="rowIndex + colIndex" style="height: 100%">
              <div class="livebox" :style="rowIndex+''+colIndex == currentIndex ? 'border: 2px solid #00C4FF' : ''"
                   @click="setWatermark">
                <div v-if="liveitemfitter(rowIndex+''+colIndex).name" class="camer-name"
                     @click="closeVideo(rowIndex+''+colIndex)">
                  <span>{{ liveitemfitter(rowIndex + '' + colIndex).name }}</span>
                </div>
                <div class="ysbutton" v-if="liveitemfitter(rowIndex+''+colIndex).flvUrl"
                     @click="closeVideo(rowIndex+''+colIndex)">
                  <span>关闭</span>
                </div>
                <LivePlayer :id="'live'+rowIndex+colIndex" class="area" @click="setCurrent(rowIndex + '' + colIndex)"
                            :ref="'live'+rowIndex+colIndex"
                            :videoUrl="liveitemfitter(rowIndex + '' + colIndex).flvUrl"
                            fluent autoplay live stretch
                            dblclick-fullscreen hide-stretch-button hide-fullscreen-button :controls="xfdivlive"
                            aspect='fullscreen'>
                  <div v-show="fullscreen(rowIndex+''+colIndex)" v-drag
                       style="position: absolute;top: 20px;right:220px;cursor: move;z-index: 88">
                    <ControlView ref="controlview" :playerList="playerList" :iWndType="iWndType"
                                 :cameraData="currebtdata"
                                 v-show="fullscreen(rowIndex+''+colIndex)"
                                 @liveNewData="liveNewData"
                                 @defenhandle="defenhandle" @liveNewreRresh="defenhandle" @openvocality="openvocality"
                                 @closevocality="closevocality"></ControlView>
                  </div>
                </LivePlayer>
              </div>
            </el-col>
          </el-row>
        </div>

        <!--        <div style="height: 100%;" v-show="iWndType === 14">-->
        <!--          <el-row :gutter="2" :style="{ height: 50 + '%' }">-->
        <!--            <el-col :span="12" style="height: 100%">-->
        <!--              <div class="livebox" :style="currentIndex == '00' ? 'border: 2px solid #00C4FF' : ''">-->
        <!--                <div v-if="liveitemfitter('00').name" class="camer-name"-->
        <!--                     @click="closeVideo('00')">-->
        <!--                  <span>{{ liveitemfitter('00').name }}</span>-->
        <!--                </div>-->
        <!--                <div class="ysbutton" @click="closeVideo('00')">-->
        <!--                  <span>关闭</span>-->
        <!--                </div>-->
        <!--                <LivePlayer class="area" @click="setCurrent('00')" :ref="'live'+rowIndex+colIndex"-->
        <!--                            :videoUrl="liveitemfitter('00').flvUrl" fluent autoplay live stretch-->
        <!--                            dblclick-fullscreen hide-stretch-button hide-fullscreen-button :controls="xfdivlive"-->
        <!--                            aspect='fullscreen'>-->
        <!--                  <div v-show="fullscreen('00')" v-drag-->
        <!--                       style="position: absolute;top: 20px;right:220px;cursor: move;z-index: 88">-->
        <!--                    <ControlView ref="controlview" :playerList="playerList" :iWndType="iWndType"-->
        <!--                                 :cameraData="currebtdata"-->
        <!--                                 v-show="fullscreen(rowIndex+''+colIndex)"-->
        <!--                                 @liveNewData="liveNewData"-->
        <!--                                 @defenhandle="defenhandle" @liveNewreRresh="defenhandle" @openvocality="openvocality"-->
        <!--                                 @closevocality="closevocality"></ControlView>-->
        <!--                  </div>-->
        <!--                </LivePlayer>-->
        <!--              </div>-->
        <!--            </el-col>-->
        <!--            <el-col :span="12" style="height: 100%">-->
        <!--              <div class="livebox" :style="currentIndex == '01' ? 'border: 2px solid #00C4FF' : ''">-->
        <!--                <div v-if="liveitemfitter('01').name" class="camer-name"-->
        <!--                     @click="closeVideo('01')">-->
        <!--                  <span>{{ liveitemfitter('01').name }}</span>-->
        <!--                </div>-->
        <!--                <div class="ysbutton" @click="closeVideo('01')">-->
        <!--                  <span>关闭</span>-->
        <!--                </div>-->
        <!--                <LivePlayer class="area" @click="setCurrent('01')" :ref="'live'+rowIndex+colIndex"-->
        <!--                            :videoUrl="liveitemfitter('01').flvUrl" fluent autoplay live stretch-->
        <!--                            dblclick-fullscreen hide-stretch-button hide-fullscreen-button :controls="xfdivlive"-->
        <!--                            aspect='fullscreen'>-->
        <!--                  <div v-show="fullscreen('01')" v-drag-->
        <!--                       style="position: absolute;top: 20px;right:220px;cursor: move;z-index: 88">-->
        <!--                    <ControlView ref="controlview" :playerList="playerList" :iWndType="iWndType"-->
        <!--                                 :cameraData="currebtdata"-->
        <!--                                 v-show="fullscreen(rowIndex+''+colIndex)"-->
        <!--                                 @liveNewData="liveNewData"-->
        <!--                                 @defenhandle="defenhandle" @liveNewreRresh="defenhandle" @openvocality="openvocality"-->
        <!--                                 @closevocality="closevocality"></ControlView>-->
        <!--                  </div>-->
        <!--                </LivePlayer>-->
        <!--              </div>-->
        <!--            </el-col>-->
        <!--          </el-row>-->
        <!--          <el-row :gutter="2" v-for="(item, rowIndex) in rows" :key="rowIndex" type="flex"-->
        <!--                  :style="{ height: 25 + '%' }">-->
        <!--            <el-col v-for="(item2, colIndex) in cols" :span="item2" :key="item + colIndex" style="height: 100%">-->
        <!--              <div class="livebox" :style="item+''+colIndex == currentIndex ? 'border: 2px solid #00C4FF' : ''">-->
        <!--                <div v-if="liveitemfitter(item+''+colIndex).name" class="camer-name"-->
        <!--                     @click="closeVideo(item+''+colIndex)">-->
        <!--                  <span>{{ liveitemfitter(item + '' + colIndex).name }}</span>-->
        <!--                </div>-->
        <!--                &lt;!&ndash;              v-if="liveitemfitter(item+''+colIndex).flvUrl"&ndash;&gt;-->
        <!--                <div class="ysbutton"-->
        <!--                     @click="closeVideo(item+''+colIndex)">-->
        <!--                  <span>关闭</span>-->
        <!--                </div>-->
        <!--                <LivePlayer class="area" @click="setCurrent(item + '' + colIndex)" :ref="'live'+item+colIndex"-->
        <!--                            :videoUrl="liveitemfitter(item+''+colIndex).flvUrl" fluent autoplay live stretch-->
        <!--                            dblclick-fullscreen hide-stretch-button hide-fullscreen-button :controls="xfdivlive"-->
        <!--                            aspect='fullscreen'>-->
        <!--                  <div v-show="fullscreen(item+''+colIndex)" v-drag-->
        <!--                       style="position: absolute;top: 20px;right:220px;cursor: move;z-index: 88">-->
        <!--                    <ControlView ref="controlview" :playerList="playerList" :iWndType="iWndType"-->
        <!--                                 :cameraData="currebtdata"-->
        <!--                                 v-show="fullscreen(item+''+colIndex)"-->
        <!--                                 @liveNewData="liveNewData"-->
        <!--                                 @defenhandle="defenhandle" @liveNewreRresh="defenhandle" @openvocality="openvocality"-->
        <!--                                 @closevocality="closevocality"></ControlView>-->
        <!--                  </div>-->
        <!--                </LivePlayer>-->
        <!--              </div>-->
        <!--            </el-col>-->
        <!--          </el-row>-->
        <!--        </div>-->
      </div>


      <div class="footer-nav">
        <div style="display: flex">
          <!--          <div class="videpbutton" @click="luncirPlay()">-->
          <!--            <el-tooltip :content="!cirblooun ? '选择轮循播放通道':'停止轮循播放'" placement="bottom" effect="light">-->
          <!--              <text v-if="!cirblooun">轮播</text>-->
          <!--              <div v-else style="width: 12px;height: 12px;background-color: rgb(221, 75, 57)"></div>-->
          <!--            </el-tooltip>-->
          <!--          </div>-->
          <!--          <div class="videpbutton" @click="collecthandle()">-->
          <!--            收藏-->
          <!--          </div>-->
          <!--        <div v-if="this.colNum === 1" class="videpbutton" @click="watermarkSwitch = !watermarkSwitch">-->
          <!--          {{ !watermarkSwitch ? "设置水印" : "关闭设置" }}-->
          <!--        </div>-->
        </div>

        <div style="display: flex">
          <div class="videpbutton" v-for="list in playerBtnGroup" :key="list.num" @click.prevent="splitVideo(list.num)"
               :class="{'videpbutton-active' : iWndType == list.num}">
            {{ list.name }}
          </div>
        </div>
        <div class="videpbutton" @click="enterFullScreen()">
          <img style="width: 16px;height: 16px" src="/videox/quanping.png" alt="全屏">
        </div>
      </div>
    </div>

    <div class="main-right">
      <div class="control" @click="isrightboxShow = !isrightboxShow">
        <img v-show="isrightboxShow" src="/tree/right-sq.png">
        <img v-show="!isrightboxShow" src="/tree/right-zk.png">
      </div>
      <div class="bg-box content" :class="{ expandcontent: !isrightboxShow }">
        <ControlPanel ref="controlpanel" :playerList="playerList" :iWndType="iWndType" :audioData="audioData"
                      @liveNewData="liveNewData" :cameraData="currebtdata"
                      @defenhandle="defenhandle" @liveNewreRresh="defenhandle" @openvocality="openvocality"
                      @closevocality="closevocality"></ControlPanel>
      </div>
    </div>
  </div>

  <el-dialog v-model="dialogTableVisible" title="选择轮巡播放通道" width="50%">
    <Carousel ref="carousel" @startVideoPlay="startVideoPlay"></Carousel>
  </el-dialog>

  <el-dialog v-model="watermarkdialogVisible" title="水印设置" :width="500">
    <el-form :model="formInline" class="demo-form-inline">
      <el-form-item label="相机ID:">
        <el-input v-model="watermarkForm.cameraID" placeholder="相机ID" readonly/>
      </el-form-item>
      <el-form-item label="文字颜色:">
        <el-radio-group v-model="watermarkForm.color">
          <el-radio label="white">white</el-radio>
          <el-radio label="blue">blue</el-radio>
          <el-radio label="red">red</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="视图宽度:">
        <el-input v-model="watermarkForm.viewWidth" placeholder="视图宽度" readonly/>
      </el-form-item>
      <el-form-item label="视图高度:">
        <el-input v-model="watermarkForm.viewHeight" placeholder="视图高度" readonly/>
      </el-form-item>
      <el-form-item label="视图X:">
        <el-input v-model="watermarkForm.viewX" placeholder="视图X坐标" readonly/>
      </el-form-item>
      <el-form-item label="视图Y:">
        <el-input v-model="watermarkForm.viewY" placeholder="视图Y坐标" readonly/>
      </el-form-item>
      <el-form-item label="X坐标:">
        <el-input v-model="watermarkForm.ratioX" placeholder="X坐标" readonly/>
      </el-form-item>
      <el-form-item label="y坐标:">
        <el-input v-model="watermarkForm.ratioY" placeholder="y坐标" readonly/>
      </el-form-item>
      <el-form-item label="字体大小:">
        <el-input-number
            v-model="watermarkForm.size"
            :min="10"
            :max="50"
            controls-position="right"
        />
      </el-form-item>
      <el-form-item label="文字内容:">
        <el-input v-model="watermarkForm.text" placeholder="文字内容" clearable/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="watermarkdialogVisible = false">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="confirmWatermark(true)">{{ $t("confirm") }}</el-button>
      </div>
    </template>
  </el-dialog>


</template>
<script>
import LivePlayer from "@liveqing/liveplayer-v3";
import ControlPanel from "@/views/videoviews/rightbox/controlPanel.vue";
import Carousel from "@/views/livegbs/carousel.vue";
import elementResizeDetectorMaker from "element-resize-detector";
import ControlView from "@/views/videoviews/rightbox/controView.vue";
import baseService from "@/service/baseService";
import app from "@/constants/app";

const liveData = [
  {
    idIndex: "00",
    index: 0,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "01",
    index: 1,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "02",
    index: 2,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "03",
    index: 3,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "04",
    index: 4,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "05",
    index: 5,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "10",
    index: 6,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "11",
    index: 7,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "12",
    index: 8,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "13",
    index: 9,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "14",
    index: 10,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "15",
    index: 11,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "20",
    index: 12,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "21",
    index: 13,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "22",
    index: 14,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "23",
    index: 15,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "24",
    index: 16,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "25",
    index: 17,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "30",
    index: 18,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "31",
    index: 19,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "32",
    index: 20,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "33",
    index: 21,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "34",
    index: 22,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  },
  {
    idIndex: "35",
    index: 23,
    flvUrl: "",
    gbsCode: "",
    netType: "",
    startTime: 0
  }
];

const watermarkForm = {
  cameraID: "",
  color: "white",
  ratioX: "",
  ratioY: "",
  size: 30,
  text: "",
  viewWidth: 0,
  viewHeight: 0,
  viewX: 0,
  viewY: 0
}

export default {
  components: {
    LivePlayer,
    ControlPanel,
    ControlView,
    Carousel
  },
  data() {
    return {
      isrightboxShow: true,
      videoUrl: "",
      clientHeight: document.body.clientHeight,
      leftheight: 0,
      liveheight: 0,
      rows: [1],
      cols: [24],
      colNum: 1, //分屏数
      currentIndex: "00", //当前选择窗口坐标
      currebtdata: {
        flvUrl: "",
        gbsCode: "",
        netType: "",
        startTime: 0
      }, //当前选择窗口信息
      index: 1,
      playerList: JSON.parse(JSON.stringify(liveData)),
      iWndType: 1,
      dialogTableVisible: false,
      setIntervalEcd: null,
      setIntervalPlay: null,
      cirnum: 0, //轮播计数
      cirblooun: false, //轮播状态
      palyVideos: {
        dara: [],
        time: 0
      },
      audioData: null,
      kg: false,
      xfdivlive: true,
      watermarkSwitch: false,
      watermarkdialogVisible: false,
      watermarkForm: JSON.parse(JSON.stringify(watermarkForm))
    }
  },
  directives: {
    drag(el) {
      let oDiv = el; //当前元素
      let self = this; //上下文
      //禁止选择网页上的文字
      document.onselectstart = function () {
        return false;
      };
      oDiv.onmousedown = function (e) {
        //鼠标按下，计算当前元素距离可视区的距离
        let disX = e.clientX - oDiv.offsetLeft;
        let disY = e.clientY - oDiv.offsetTop;
        document.onmousemove = function (e) {
          //通过事件委托，计算移动的距离
          let l = e.clientX - disX;
          let t = e.clientY - disY;
          // 获取html可视区域高度
          const width = document.querySelector(".el-container").clientWidth;
          const height = document.querySelector(".el-container").clientHeight;
          if (l >= width - 100) {
            l = width - 100;
          } else if (l <= 0) {
            l = 0;
          }
          if (t >= height - 100) {
            t = height - 100;
          } else if (t <= 0) {
            t = 0;
          }
          //移动当前元素
          oDiv.style.left = l + "px";
          oDiv.style.top = t + "px";
        };
        document.onmouseup = function (e) {
          document.onmousemove = null;
          document.onmouseup = null;
        };
        //return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
        return false;
      };
    }
  },
  computed: {
    playerBtnGroup() {
      var list = [{
        num: 1,
        name: "单屏"
      }, {
        num: 4,
        name: "四分屏"
      }, {
        num: 9,
        name: "九分屏"
      }
        // , {
        //   num: 16,
        //   name: "十六分屏"
        // }, {
        //   num: 24,
        //   name: "二十四分屏"
        // }
        // , {
        //   num: 14,
        //   name: "异形分屏"
        // }
      ];
      // if (!this.isIE() && !this.isMobile()) {
      //   list.push({
      //     num: 16,
      //     name: "十六分屏"
      //   })
      // }
      return list;
    }
  },
  mounted() {
    // elementResizeDetectorMaker().listenTo(document.getElementById("leftheight"), () => {
    //   this.$nextTick(() => {
    //     // console.log(this.playerList)
    //     // 监听到事件后执行的业务逻辑
    //     let elementById = document.getElementById("leftheight");
    //     const rect = elementById.getBoundingClientRect();
    //     this.leftheight = rect.height - 32 - 60 - 226;
    //     this.liveheight = rect.height - 40;
    //   });
    // });
    // this.splitVideo(16)
    this.setIntervalEcd = setInterval(() => {
      this.liveEcd();
    }, 1000 * 5);
  },
  activated() {
    let data = this.playerList;
    this.playerList = JSON.parse(JSON.stringify(liveData));
    setTimeout(() => {
      this.playerList = data;
    }, 30)
  },
  methods: {
    confirmWatermark(stts) {
      baseService.get("/Camera/kxcamera/setOsd", this.watermarkForm).then((res) => {
        if (res.code !== 0) {
          if (stts) {
            return this.$message.error(res.msg);
          }
        }
        this.watermarkdialogVisible = false;
        this.watermarkSwitch = false;
        this.watermarkForm = JSON.parse(JSON.stringify(watermarkForm))
        if (stts) {
          this.$message.success("设置成功！")
        }
      });
    },
    mouseenterlive(boole) {
      this.xfdivlive = boole;
    },
    collecthandle() {
      this.$refs.controlpanel.collecthandle();
    },
    sendAudinData(datas) {
      this.audioData = datas;
    },
    fullscreen(id) {
      if (id && this.$refs['live' + id]) {
        let player = this.$refs['live' + id][0];
        if (player != undefined) {
          return player.fullscreen;
        } else {
          return false;
        }
      }
    },
    openvocality(id) {
      for (let i = 0; i < this.playerList.length; i++) {
        if (this.playerList[i].idIndex === id) {
          let player = this.$refs['live' + id][0];
          player.setVolume(0.5);
          player.setMuted(false);
        } else {
          this.closevocality(this.playerList[i].idIndex)
        }
      }
    },
    closevocality(id) {
      if (this.$refs['live' + id] === undefined) {
        return;
      }
      let player = this.$refs['live' + id][0];
      if (player != undefined) {
        player.setMuted(true);
      }
    },
    defenhandle() {
      this.$refs.livetree.getNvrTree();
      this.$refs.livetree.getSchemeList();
    },
    // 4G检测 关闭
    liveEcd() {
      let timestamp = Date.now() - (20 * 1000);
      for (let i = 0; i < this.playerList.length; i++) {
        if (this.playerList[i].netType === "Wireless") {
          if (this.playerList[i].startTime < timestamp) {
            this.closeVideo(this.playerList[i].idIndex);
          }
        }
      }
    },
    // 4G操作后重新赋值时间
    liveNewData(item, time) {
      if (item.netType !== "Wireless") {
        return;
      }
      let timestamp = Date.now() + (1000 * time);
      for (let i = 0; i < this.playerList.length; i++) {
        if (this.playerList[i].idIndex === item.idIndex) {
          this.playerList[i].startTime = timestamp;
        }
      }
    },
    // 全屏
    enterFullScreen() {
      let element = this.$refs.fullscreenElement;
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) { /* Firefox */
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) { /* IE/Edge */
        element.msRequestFullscreen();
      }
    },
    // 分屏
    splitVideo(colNum) {
      this.watermarkSwitch = false;
      this.iWndType = colNum;
      this.rows = [];
      this.cols = [];
      let row = 0;
      let col = 0;
      if (colNum == 1) {
        this.colNum = 1;
        row = 1;
        col = 1;
      } else if (colNum == 4) {
        this.colNum = 2;
        row = 2;
        col = 2;
      } else if (colNum == 9) {
        this.colNum = 3;
        row = 3;
        col = 3;
      } else if (colNum == 16) {
        this.colNum = 4;
        row = 4;
        col = 4;
      } else if (colNum == 24) {
        this.colNum = 4;
        row = 4;
        col = 6;
      } else if (colNum == 14) {
        this.colNum = 2.5;
        row = 2;
        this.rows = [1, 2];
        this.cols = [4, 4, 4, 4, 4, 4];
      }
      if (colNum != 14) {
        for (let i = 0; i < row; i++) {
          this.rows.push(i);
        }
        for (let i = 0; i < col; i++) {
          this.cols.push(24 / col);
        }
      }
      if (this.cirblooun) {
        this.startVideoPlay(this.palyVideos);
      }
      this.setCurrent("00");
    },
    // 窗口自动向下位移
    automaticSelect() {
      this.index++;
      // 1分屏
      if (this.iWndType == 1) {
        this.index = 0;
      }

      // 4分屏
      if (this.iWndType == 4) {
        if (this.index == 2) {
          this.index = 6;
        }
        if (this.index == 8) {
          this.index = 0;
        }
      }

      // 9分屏
      if (this.iWndType == 9) {
        if (this.index == 3) {
          this.index = 6;
        }
        if (this.index == 9) {
          this.index = 12;
        }
        if (this.index == 15) {
          this.index = 0;
        }
      }

      // 16分屏
      if (this.iWndType == 16) {

        if (this.index == 4) {
          this.index = 6;
        }
        if (this.index == 10) {
          this.index = 12;
        }
        if (this.index == 16) {
          this.index = 18;
        }
        if (this.index == 22) {
          this.index = 0;
        }
      }

      // 16分屏
      if (this.iWndType == 24) {
        if (this.index == 24) {
          this.index = 0;
        }
      }

      // 14异形分屏
      if (this.iWndType == 14) {
        if (this.index == 2) {
          this.index = 6;
        }
        if (this.index == 18) {
          this.index = 0;
        }
      }

      this.setCurrent(this.playerList[this.index].idIndex);
    },
    // 设置水印
    setWatermark(event) {
      if (this.watermarkSwitch && this.watermarkForm.cameraID) {
        const rect = event.target.getBoundingClientRect();
        console.log(event, rect)
        this.watermarkForm.viewWidth = rect.width;
        this.watermarkForm.viewHeight = Math.round(rect.height);
        this.watermarkForm.viewX = Math.round(event.clientX - rect.left);
        this.watermarkForm.viewY = Math.round(event.clientY - rect.top);
        this.watermarkForm.ratioX = parseFloat(((event.clientX - rect.left) / rect.width).toFixed(2));
        this.watermarkForm.ratioY = parseFloat(((event.clientY - rect.top) / rect.height).toFixed(2));
        this.watermarkdialogVisible = true;
      }
    },
    // 获取窗口信息
    setCurrent(item) {
      this.currentIndex = item;
      this.currebtdata = this.liveitemfitter(item);
      this.watermarkForm.cameraID = this.currebtdata.id;
      console.log(this.currebtdata);
      this.$refs.controlpanel.setLocationList = [];
      setTimeout(() => {
        if (this.currebtdata.flvUrl === "") {
          return
        }
        this.$refs.controlpanel.getLocationList();
      }, 500)
    },
    liveitemfitter(idIndex) {
      for (let i = 0; i < this.playerList.length; i++) {
        if (this.playerList[i].idIndex === idIndex) {
          return this.playerList[i]
        }
      }
    },
    // 播放
    playVideo(data) {
      // 水印设置调用
      // this.watermarkForm.size = null;
      // this.watermarkForm.cameraID = data.id;
      // this.confirmWatermark(false);
      console.log(app)
      for (let i = 0; i < this.playerList.length; i++) {
        if (this.playerList[i].idIndex === this.currentIndex) {
          let timestamp = Date.now();
          this.playerList[i] = {
            ...data,
            idIndex: this.currentIndex,
            index: this.playerList[i].index,
            startTime: timestamp,
            flvUrl: app.httpgbflv + data.gbFlv
            // flvUrl: "ws://10.36.10.18:8080" + "/wsGbLive" + data.gbFlv
            // flvUrl: "ws://192.168.0.3:28000/rtp/34020000001320000001_34020000001320000001.live.flv"

          }

          this.index = this.playerList[i].index;
          this.automaticSelect();
          return;
        }
      }
    },
    // 批量、收藏 播放
    celloplayvideos(data) {
      this.playerList = JSON.parse(JSON.stringify(liveData));
      this.splitVideo(data.winType * 1);
      data.children.forEach((item) => {
        this.playVideo(item);
      })
    },
    // 关闭视频（初始化对应窗口地址）
    closeVideo(idIndex) {
      for (let i = 0; i < this.playerList.length; i++) {
        if (this.playerList[i].idIndex === idIndex) {
          this.playerList[i] = {
            idIndex: idIndex,
            index: this.playerList[i].index,
            flvUrl: "",
            gbsCode: "",
            netType: "",
            startTime: 0
          }
          this.setCurrent(idIndex);
          return;
        }
      }
    },
    luncirPlay() {
      if (this.cirblooun) {
        clearInterval(this.setIntervalPlay);
        this.cirblooun = false;
      } else {
        this.dialogTableVisible = true;
      }
    },
    startVideoPlay(data) {
      clearInterval(this.setIntervalPlay);
      this.cirnum = 0;
      this.playerList = JSON.parse(JSON.stringify(liveData));
      this.palyVideos = data;
      // if (this.palyVideos.data.length <= 0) {
      //   this.dialogTableVisible = false;
      //   return;
      // }
      this.dialogTableVisible = false;
      this.cirblooun = true;
      if (this.palyVideos.data.length > this.iWndType) {
        this.currentIndex = "00"; // 初始化索引
        this.cirnum = 0; // 初始化计数
        // this.cirblooun = true;
        this.cirPlay(this.palyVideos.data);
        this.setIntervalPlay = setInterval(() => {
          this.cirPlay(this.palyVideos.data);
        }, this.palyVideos.time * 1000);
      } else {
        this.cirPlay(this.palyVideos.data);
      }
    },
    cirPlay(data) {
      this.currentIndex = "00"
      this.playerList = JSON.parse(JSON.stringify(liveData));
      for (let i = 0; i < this.iWndType; i++) {
        if (this.cirnum >= data.length) {
          this.cirnum = 0;
          return;
        } else {
          this.playVideo(data[this.cirnum]);
          this.cirnum++;
        }
      }
    },
    kghandle() {
      this.kg = !this.kg;
    }
  }
}
</script>

<style lang="scss">
.main {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  //overflow: hidden;
}

.main-right {
  display: flex;
  align-items: center;
  margin-left: 10px;

  .expandcontent {
    height: 100%;
    width: 0 !important;
    overflow: auto;
    transition: width ease-out 0.2s;
  }
}

.main-left {
  flex: 1;
  padding: 14px;
  background-image: url("/videox/right_bg.png");
  background-size: 100% 100%;
}

.kg {
  cursor: pointer;
  position: absolute;
  z-index: 99;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  color: #FFFFFF;
  background-color: #17b4d7;
  padding: 14px 1px;
  font-size: 13px;
  writing-mode: vertical-rl;
}

.kgcss {
  width: 0;
  height: 100%;
  position: relative;
  transition: width ease-in 0.3s;
}

.el-row {
  margin-bottom: 2px;
}

.livebox:hover .ysbutton {
  display: block;
}

.livebox {
  border: 1px solid #202121;
  position: relative;
  height: 100%;
  background: #091220;

  .camer-name {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 12px;
    color: #ffffff;
    z-index: 99;
    padding: 2px 5px;
    background-color: rgba(150, 140, 140, 0.5);
    border-radius: 2px;
    cursor: pointer;
  }

  .ysbutton {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 12px;
    color: #ffffff;
    z-index: 999;
    padding: 2px 5px;
    background-color: rgba(150, 140, 140, 0.5);
    border-radius: 2px;
    cursor: pointer;
    display: none;
  }
}

.footer-nav {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  padding-top: 14px;
}

.videpbutton {
  font-weight: 500;
  font-size: 14px;
  color: #CEFAFB;
  cursor: pointer;
  padding: 6px 20px;
  background: transparent;
  border: 1px solid #00C4FF !important;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}

.videpbutton:hover {
  background-color: #00C4FF;
}

.videpbutton-active {
  background-color: #00C4FF;
}
</style>
